<template>
  <a-layout-header class="layout-header">
    <router-link class="logo" to="/">
      <!--<img src="../../assets/tezign-logo.jpg">-->
      <span>光合创造logo</span>
    </router-link>
    <a-menu theme="light" mode="horizontal" :selectedKeys="selectedKeys"
            :style="{ lineHeight: '64px',  color: 'rgba(0,0,0,.6)' }">
      <a-menu-item key="1" @click="toPage(1)">创意供给平台</a-menu-item>
      <a-menu-item key="2" @click="toPage(2)">数据智能解决方案</a-menu-item>

      <a-menu-item key="5" class="r" :style="{marginRight:'20px'}" @click="toPage(3)">登录</a-menu-item>
      <a-menu-item key="4" class="r" disabled>&nbsp;|&nbsp;</a-menu-item>
      <a-menu-item key="3" class="r">English</a-menu-item>
    </a-menu>
  </a-layout-header>
</template>

<script>
  export default {
    name: "Header",
    data(){
      return{
        selectedKeys:[],
      }
    },
    methods:{
        toPage(page){
        let url = "";
        if (page === 1) {
          url = "/page1";
        }else if(page===2){
          url = "/page2";
        }else if (page === 3) {
          url = "/login"
        }
        this.$router.push(url);
      },
    },
    mounted() {
      let currPath = this.$router.currentRoute.fullPath;
      console.log(currPath);
      if (currPath === '/page1') {
        this.selectedKeys=['1']
      }else if (currPath === '/page2') {
        this.selectedKeys=['2']
      }else if (currPath === '/login') {
        this.selectedKeys=['5']
      }

    }
  }
</script>

<style scoped>
  .layout-header {
    height: auto;
    padding: 0 20px;
    background: #fff;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .ant-menu-item {
    color: rgba(0, 0, 0, 0.6);
    font-weight: 600;
    font-size: 100%;
  }
  .ant-menu-item,
  .ant-menu-item-active {
    border-bottom: 0;
  }

  .ant-menu-item-selected {
    color: #1890ff;
  }
  .ant-menu-item:hover {
    color: #000;
    /* opacity: 0.5; */
    border-bottom: 0;
  }

  .layout-header {
    padding: 0 0;
    background: #fff;
  }

  .logo span {
    width: 100%;
    height: 100%;
    display: block;
    line-height: 42px;
    font-size: 20px;
    color: #000;
  }

  .logo {
    width: 193px;
    height: 42px;
    margin: 16px 24px 16px 0;
    float: left;
    text-decoration: none;
  }
  .r {
    float: right;
  }
</style>